<template>
  <div style="padding: 0 15px">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        :fill="topNav?(!theme.includes('2e3c56')? 'rgba(44, 78, 120, 1)' : '#fff'):(!topTheme.includes('2e3c56')? 'rgba(44, 78, 120, 1)' : '#fff')"
        d="M5 4.80027C5 4.39924 5.42413 4 5.84825 4L18.1517 4C18.5759 4 19 4.39924 19 4.80027L19 19.1997C19 19.6008 18.5759 20 18.1517 20L5.84825 20C5.42413 20 5 19.599 5 19.1997L5 4.80027ZM9.8745 13.8855Q10.6112 14.1908 11.4164 14.1908Q12.2215 14.1908 12.9582 13.8855Q13.3632 13.7177 13.7156 13.4713L14.9761 14.706L14.9764 14.7063C15.0966 14.8241 15.2613 14.8967 15.4429 14.8967C15.6213 14.8967 15.7832 14.8267 15.9029 14.7126Q15.9112 14.7047 15.9192 14.6966C16.037 14.5763 16.1096 14.4117 16.1096 14.23C16.1096 14.0517 16.0396 13.8897 15.9255 13.7701Q15.9176 13.7618 15.9094 13.7538L15.9091 13.7534L14.665 12.5347Q14.9073 12.1972 15.0742 11.8107Q15.3886 11.0826 15.3886 10.286Q15.3886 9.48943 15.0742 8.76132Q14.7714 8.05993 14.2203 7.52008Q13.6706 6.98164 12.9582 6.68647Q12.2215 6.38123 11.4164 6.38123Q10.6112 6.38123 9.8745 6.68647Q9.16212 6.98164 8.61246 7.52008Q8.06136 8.05993 7.75852 8.76132Q7.44413 9.48943 7.44413 10.286Q7.44413 11.0826 7.75852 11.8107Q8.06136 12.5121 8.61246 13.0519Q9.16212 13.5904 9.8745 13.8855ZM12.4478 12.6537Q11.9562 12.8574 11.4164 12.8574Q10.8765 12.8574 10.3849 12.6537Q9.91085 12.4573 9.5455 12.0994Q9.18159 11.7429 8.98262 11.2821Q8.77747 10.807 8.77747 10.286Q8.77747 9.76499 8.98262 9.28986Q9.18159 8.82904 9.5455 8.47256Q9.91085 8.11467 10.3849 7.91826Q10.8765 7.71457 11.4164 7.71457Q11.9562 7.71457 12.4478 7.91826Q12.9219 8.11467 13.2872 8.47256Q13.6511 8.82904 13.8501 9.28986Q14.0552 9.76499 14.0552 10.286Q14.0552 10.807 13.8501 11.2821Q13.6511 11.743 13.2872 12.0994Q12.9219 12.4573 12.4478 12.6537ZM15.3305 16.9833C15.7546 16.9833 16.1787 17.3824 16.1787 17.7835C16.1787 18.1827 15.839 18.5837 15.3305 18.5837L8.96667 18.5837C8.54254 18.5837 8.11841 18.1845 8.11841 17.7835C8.11841 17.3842 8.54254 16.9833 8.96667 16.9833L15.3305 16.9833Z"
        fill-rule="evenodd"
        fill-opacity="0.8"
      ></path>
    </svg>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";

const settingsStore = useSettingsStore();
const topTheme = computed(() => settingsStore.topTheme);
const theme = computed(() => settingsStore.theme);
const topNav = computed(() => settingsStore.topNav);

defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();
// const toggleClick = () => {
//   emit('toggleClick');
// }
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
